<template>
  <div class="app-container">
    <el-card header="基础信息" style="width: 100%">
      <div slot="header" class="clearfix">
        <span>基础信息</span>
        <el-button type="primary" @click="handleSearch" size="mini" style="float: right; margin: 0px 10px">查询</el-button>
      </div>
      <el-form class="demo-form-inline" :model="form" ref="formMain" :rules="rules" label-width="135px" style="width: 100%">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="机型" prop="itmMstrJzdm">
              <HdSearchInput
                v-model="form.itmMstrJzdm"
                keyName="itmMstrJzdm"
                modulePath="rdmodule/researchData"
                @change="
                  (value) => {
                    handleChangeJzdm(value)
                  }
                "
                placeholder="请选择机种代码"></HdSearchInput>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-tabs v-model="activeName">
        <el-tab-pane label="模具验收调拨单" name="first">
          <div style="margin-top: 5px; height: 600px; overflow: auto">
            <FileUpload readOnly v-model="fileMessage" :isShowTip="false" :fileType="['png', 'jpg', 'jpeg', 'pdf']"></FileUpload>
            <el-empty v-if="fileMessage == null" description="暂无文件"></el-empty>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
//模具验收调拨单报表
import mixins from '@/mixins/common'
import RdmoduleService from '@/api/rdmodule/rdmodule'
export default {
  name: 'MoldAcceptanceReport',
  mixins: [mixins.customerOptions],
  data() {
    return {
      modulePermi: 'rdmodule:MoldAcceptanceReport',
      form: {
        jzmName: '',
        itmMstrJzdm: '',
        fileType: 'receipt',
      },
      activeName: 'first',
      fileMessage: null,
      rules: {
        itmMstrJzdm: [{ required: true, message: '请选择机型' }],
        fileType: [{ required: true, message: '请选择文件类型' }],
      },
      tableDataHeight: 'calc(100% - 60px)',
      options: [
        { prop: 'itmCustwldm', label: '客户编码' },
        { prop: 'bomWldm', label: '物料代码', width: '120px' },
        { prop: 'itmPmgg', label: '产品名称' },
      ],
    }
  },
  methods: {
    handleSearch() {
      this.$refs.formMain.validate((valid) => {
        if (valid) {
          RdmoduleService.getReport(this.form.itmMstrJzdm, this.form.fileType).then((res) => {
            if (res.code == 200) {
              this.fileMessage = res.data.fileMessage
              this.$message.success('查询成功')
            }
          })
        }
      })
    },
    handleChangeJzdm(val) {
      this.form.jzmName = val.jzmName
      this.form.itmMstrJzdm = val.itmMstrJzdm
    },
  },
}
</script>

<style lang="scss" scoped></style>
